<template>
  <div id="wrapper">
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
      <el-descriptions class="margin-top" title="许可证详情" :column="3" :size="''">
        <template slot="extra">
        <el-button type="primary" size="small" @click="handleApprove(props.$index, props.row)">审核</el-button>
        </template>
        <el-descriptions-item label="客户名称">{{ props.row.client }}</el-descriptions-item>
        <el-descriptions-item label="产品类型">{{ props.row.type == 0 ? "关键信息基础设施安全保卫平台" : props.row.type == 1 ? "网络安全协调指挥平台" : props.row.type == 2 ? "AiLPHA一体化全链路网络安全监督管理与运营平台" : "AiDSC数据安全管控平台" }}</el-descriptions-item>
        <el-descriptions-item label="合同编号">{{ props.row.no }}</el-descriptions-item>
        <el-descriptions-item label="合同类型">{{ licType[props.row.licType] }}</el-descriptions-item>
        <el-descriptions-item label="机器码">{{ props.row.mac }}</el-descriptions-item>
        <el-descriptions-item label="合同开始时间">{{ props.row.startTime }}</el-descriptions-item>
        <el-descriptions-item label="合同结束时间">{{ props.row.endTime }}</el-descriptions-item>
        <el-descriptions-item label="合同时长(月)">{{ props.row.mouth }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ props.row.remarks }}</el-descriptions-item>
        <el-descriptions-item :label="'模块'">
        <template>
          <el-tag v-for="item in props.row.model" :key="item.modelCode" :type="item.purchase ? 'success' : 'danger'">
          {{ item.modelName }} <i class="el-icon-check" v-if="item.purchase"></i><i class="el-icon-close" v-if="!item.purchase"></i>
          </el-tag>
        </template>
        </el-descriptions-item>
      </el-descriptions>
      </template>
    </el-table-column>
    <el-table-column
    label="客户名称"
    prop="client">
    </el-table-column>
    <el-table-column
    label="合同类型">
      <template slot-scope="scope">
      {{ scope.row.type == 0 ? "关键信息基础设施安全保卫平台" : scope.row.type == 1 ? "网络安全协调指挥平台" : scope.row.type == 2 ? "AiLPHA一体化全链路网络安全监督管理与运营平台" : "AiDSC数据安全管控平台"}}
      </template>
    </el-table-column>
    <el-table-column
    label="合同编号"
    prop="no">
    </el-table-column>
    <el-table-column
    label="创建时间"
    prop="createTime"
    width="100">
    </el-table-column>
    <el-table-column
        label="申请人"
        prop="applyUser">
    </el-table-column>
    <el-table-column
    label="操作">
      <template slot-scope="scope">
      <el-button
        size="mini"
        @click="handleApprove(scope.$index, scope.row)">审核</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%">
      <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入通过审核或不通过审核的理由(非必填)"
          v-model="approveQuery.content">
      </el-input>
      <el-row style="margin-top: 1em; text-align: right">
        <el-button type="danger" @click="approve(0)">拒绝</el-button>
        <el-button type="primary" @click="approve(1)">同意</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
 export default {
  name: 'licenseApprovalList',
  data: function(){
   return {
    listQuery: {
      "pageNo": 1,
      "pageSize": 10
    },
    total: 50,
    tableData: [],
    licType: {
     0: '正式合同',
     1: '试用合同',
     2: '内部测试'
    },
    dialogVisible: false,
    dialogTitle: '',
    approveQuery: {
      content: '',
      licenseId: 1,
      approve: 1
    }
   }
  },
  methods: {
    /**
     * 审核
     * @param status 0拒绝 1同意
     */
    async approve(status) {
      this.approveQuery.approve = status
      let res = await this.$http.post('/api/license/approve', this.approveQuery)
      if(res.code == 0){
        this.$message({
          message: res.message,
          type: 'success'
        })
        this.dialogVisible = false
        this.getList()
      }
    },
    async handleApprove(index, row){
      this.approveQuery.content = ''
      this.approveQuery.licenseId = row.id
      this.dialogTitle = "审核许可申请"
      this.dialogVisible = true
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getList()
    },
    async getList(){
      let res = await this.$http.post('/api/license/getPendingReviewLicense', this.listQuery)
      this.tableData = res.data.data
      this.total = res.data.total
      this.tableData.forEach(element => {
        if(element.model != '' && element.model != undefined) {
          element.model = JSON.parse(element.model)
        }
        if(element.file != '' && element.file != undefined) {
          element.file = JSON.parse(element.file)
        }
      });
    }
  },
  activated: function(){
    this.getList()
  },
  mounted() {
    this.$bus.$on('page-refresh', name => {
      if (name === 'LicenseApproval') {
        this.getList()
      }
    })
  }
 }
</script>

<style>
  .demo-table-expand{
    font-size: 0;
  }
  .demo-table-expand label{
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item{
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .apply{
    padding: 10px;
    padding-right: 50px;
    text-align: right;
  }
</style>
